<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>
        .active {
            color: brown;
        }
    </style>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        function MyApp() {
            return (
                <>
                    <h1 className='active' title={10 - 2 + "wwwww"}>Hello, world! </h1>
                    <ClickEvent />

                </>

            )
        }

        function MyPu() {
            return ListItems


        }
        const container = document.getElementById('root');
        const root = ReactDOM.createRoot(container);
        root.render(<>
            <MyApp />
            <MyPu />
        </>);


        const products = [
            { title: 'Cabbage', id: 1 },
            { title: 'Garlic', id: 2 },
            { title: 'Apple', id: 3 },
        ];
        const ListItems = products.map(item => {
            return <li key={item.id}>{item.title} </li>
        })
        import { useState } from 'react';
        function ClickEvent() {
            const [n, m] = useState(0)
            const active2 = (e) => {
                m(n + 1)
            }
            return (
                <button onClick={(e) => {
                    active2()
                }}>
                    click
                </button>
            )
        }

    </script>


</body>

</html>